<template>
    <div id="new-physical">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/physicalTest' }">体测管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{physicalId?'编辑体测':'新增体测'}}</el-breadcrumb-item>
            <span class="phy-standard fr" @click="checkStandard()">体测标准</span>
        </el-breadcrumb>

        <div class="phy-form contentBox">
            <div class="list_head">
                <span class="head_name">体测信息</span>
                <el-button class="list_btn" type="primary" @click="cancle()">返回</el-button>
                <el-button v-if="!physicalId" class="list_btn" type="primary" @click="preserve()">保存</el-button>
                <el-button v-if="physicalId" class="list_btn" type="primary" @click="editSave()">保存</el-button>
            </div>
            <el-form ref="appForm" :model="appForm" :inline-message="true" label-position="left" :rules="rules" label-width="100px">
                <el-form-item label="体测标题：" prop="physicalName" style="margin-top:20px;">
                    <el-input v-model="appForm.physicalName" placeholder="请输入标题，不超过20个字符" class="el-input1"></el-input>
                </el-form-item>
                <el-form-item label="开始时间：" required>
                    <el-form-item prop="startTime" class="time">
                        <el-date-picker v-model="appForm.startTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" class="qizhiDate"></el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="结束时间：" required>
                    <el-form-item prop="endTime" class="time">
                        <el-date-picker v-model="appForm.endTime" class="qizhiDate" format="yyyy/MM/dd" placeholder="yyyy/MM/dd"></el-date-picker>
                    </el-form-item>
                </el-form-item>

                <el-form-item label="应用学校：" required v-if="!physicalId">
                    <el-transfer v-model="appForm.openedSchools" filterable :titles="['未应用学校', '应用学校']" :button-texts="[' 删除', '添加 ']" class="my-transfer"
                        :format="{noChecked: '${total}', hasChecked: '${checked}/${total}'}" :data="options">
                        <el-button style="margin-left: 40px;" slot="left-footer" size="small">一共{{options.length - appForm.openedSchools.length}}所学校</el-button>
                        <el-button style="margin-left: 40px;" slot="right-footer" size="small">一共{{appForm.openedSchools.length}}所学校</el-button>
                    </el-transfer>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            let checkTitle = (rule, value, callback) => {
                value = value.trim();
                if (value) {
                    callback();
                } else {
                    callback(new Error("标题不能为空或空格"));
                }
            };
            let checkStartTime = (rule, value, callback) => {
                if (value) {
                    let startTime = new Date(this.appForm.startTime).getTime();
                    let endTime = new Date(this.appForm.endTime).getTime();
                    if (startTime > endTime) {
                        callback(new Error("请正确填写体测时间"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            let checkEndTime = (rule, value, callback) => {
                if (value) {
                    let startTime = new Date(this.appForm.startTime).getTime();
                    let endTime = new Date(this.appForm.endTime).getTime();
                    if (startTime > endTime) {
                        callback(new Error("请正确填写体测时间"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            return {
                physicalId: this.$util.getUrlParam('physicalId') || '',

                options: [
                    {
                        key: "6001",
                        label: "浙江理工"
                    },
                    {
                        key: "6002",
                        label: "浙江财经"
                    },
                    {
                        key: "6004",
                        label: "浙江大学"
                    },
                ],
                appForm: {
                    physicalName: this.$util.getUrlParam('physicalName') || "",
                    startTime: this.$util.getUrlParam('startTime') ? new Date(this.$util.getUrlParam('startTime') * 1) : "",
                    endTime: this.$util.getUrlParam('endTime') ? new Date(this.$util.getUrlParam('endTime') * 1) : "",
                    openedSchools: [] //应用的学校
                },
                rules: {
                    physicalName: [
                        { required: true, message: "请输入体测标题", trigger: "blur" },
                        { min: 1, max: 20, message: "不超过20个字符", trigger: "blur" },
                        { validator: checkTitle }
                    ],
                    startTime: [
                        {
                            type: "date",
                            required: true,
                            message: "请选择开始时间",
                            trigger: "change"
                        },
                        { validator: checkStartTime },
                        { validator: checkEndTime }
                    ],
                    endTime: [
                        {
                            type: "date",
                            required: true,
                            message: "请选择结束时间",
                            trigger: "change"
                        },
                        { validator: checkStartTime },
                        { validator: checkEndTime }
                    ],
                }
            }
        },
        mounted() {
            // 获取学校列表
            this.getSchoolList()
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //获取学校列表
            getSchoolList() {
                this.options = [];
                this.$util.getSchools().then(schools => {
                    schools.forEach(item => {
                        this.options.push({
                            key: item.schoolId,
                            label: item.name
                        })
                    });
                })
            },
            // 编辑保存
            editSave() {
                this.$refs.appForm.validate(valid => {
                    if (valid) {
                        this.$axios.post('/jlp/physical/edit', {
                            physicalId: this.physicalId * 1,
                            physicalName: this.appForm.physicalName,
                            startTime: new Date(this.appForm.startTime).getTime(),
                            endTime: new Date(this.appForm.endTime).getTime(),
                        }).then(res => {
                            if (res.data.error == 10000) {
                                this.$util.successMsg('保存成功');
                                location.href = '/#/physicalTest';
                            } else {
                                this.$util.errorMsg(res.data.message);
                            }
                        }).catch(res => {
                            this.$util.errorMsg('服务器开小差');
                        })
                    }
                })
            },
            // 新增保存
            preserve() {

                this.$refs.appForm.validate(valid => {
                    if (valid) {
                        let schoolIds = [], appForm = this.appForm;

                        if (appForm.openedSchools.length < 1) {
                            return this.$util.errorMsg('请添加应用学校');
                        }
                        for (let i = 0; i < appForm.openedSchools.length; i++) {
                            schoolIds.push(appForm.openedSchools[i])
                        }

                        this.$axios.post('/jlp/physical/add', {
                            physicalName: this.appForm.physicalName,
                            startTime: new Date(this.appForm.startTime).getTime(),
                            endTime: new Date(this.appForm.endTime).getTime(),
                            schoolIds: schoolIds
                        }).then(res => {
                            if (res.data.error == 10000) {
                                this.$util.successMsg('体测新增成功');
                                location.href = '/#/physicalTest';
                            } else {
                                this.$util.errorMsg(res.data.message);
                            }
                        }).catch(res => {
                            this.$util.errorMsg('服务器开小差');
                        })
                    }
                })

            },
            checkStandard() {
                location.href = '/#/physicalStandard'
            },
            cancle() {
                location.href = '/#/physicalTest'
            },

        }
    }
</script>
<style>
    .phy-form {
        padding: 10px;
        background-color: #fff;
    }

    .campContain {
        width: 700px;
        height: 135px;
        margin-top: 20px;
        border: solid 1px gray;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    .campSpan {
        display: block;
        text-align: center;
        float: left;
        height: 36px;
        padding: 0 30px 5px 15px;
        border: solid 1px #999;
        border-radius: 5px;
        margin: 10px;
        box-sizing: border-box;
        font-size: 12px;
        position: relative;
        cursor: pointer;
    }

    .campSpan i {
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #999;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .el-transfer-panel__body{
        height: 287px;
    }

    .my-transfer {
        text-align: left;
        display: inline-block;
    }

    .my-transfer .el-input {
        width: 160px;
    }
</style>